
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
function resolve(dir) {
    return path.join(__dirname, dir)
}

const Timestamp = new Date().getTime() // 时间戳
const PROJECT_VERSION = JSON.stringify(require('./package.json').version)
const curTime = new Date()
const BUILD_TIME = JSON.stringify('build time: ' + curTime.toLocaleDateString())

module.exports = {
    publicPath: './',
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    //less 配置
    pluginOptions: { // 第三方插件配置
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, './src/assets/css/common.less')] // less所在文件路径
        }
    },
    //移动端适配
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        remUnit: 37.5
                    })
                ]
            }
        }
    },

    devServer:{
         open:true,
         port:8888
    },
    configureWebpack: config => {
        // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
        config.output.filename = `js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            config.output.chunkFilename = `js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            config.plugins.push(
                new MiniCssExtractPlugin({
                    // 修改打包后css文件名
                    filename: `css/[name].${process.env.VUE_APP_Version}.css`,
                    chunkFilename: `css/[name].${process.env.VUE_APP_Version}.css`
                })
            ),
            config.plugins.push(
                new webpack.DefinePlugin({
                    // 项目版本号
                    'process.env.PROJECT_VERSION': PROJECT_VERSION,
                    'process.env.BUILD_TIME': BUILD_TIME
                })
            ),
            config.resolve = {
                extensions: ['.js', '.vue', '.json', ".css"],
                alias: {
                    'vue$': 'vue/dist/vue.esm.js',
                    '@': resolve('src'),
                }
            }
    },
    // 修改打包后img文件名
    chainWebpack: config => {
        config.module
            .rule("images")
            .use("url-loader")
            .tap(options => {
                options.name = `img/[name].${process.env.VUE_APP_Version}.[ext]`;
                options.fallback = {
                    loader: "file-loader",
                    options: {
                        name: `img/[name].${process.env.VUE_APP_Version}.[ext]`
                    }
                };
                return options;
            })
    }
}